<template>
<div>
    <!--搜索栏-->
    <!-- <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
            <el-input size="small" v-model="formInline.userName" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="success" icon="el-icon-search" @click="handleAdd">添加</el-button>
        </el-form-item>
    </el-form> -->

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column sortable prop="materialName" label="材料名称">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.materialName}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="amount" label="数量">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.amount}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="unit" label="单位">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.unit}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="unitPrice" label="单价">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.unitPrice}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="totalPrice" label="总价">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.totalPrice}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="purchaser" label="采购商">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.purchaser}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="createUserName" label="采购人">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.createUserName}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="createTime" label="采购时间">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.createTime}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="productionDate" :formatter="formatTime1" label="生产日期">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.productionDate}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="expireDate" :formatter="formatTime2" label="过期日期">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.expireDate}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="createTime" label="是否过期">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.isExpire == true ? "是":"否"}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="createTime" label="采购状态">
            <template slot-scope="scope"><span :style="scope.row.isExpire ? 'color: red;font-weight: bold;' : ''">{{scope.row.purchaseStatus == '1' ? "已采购":"未采购"}}</span></template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250px">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" v-if="scope.row.purchaseStatus != '1'" @click="handleEdit(scope.$index, scope.row)">录入采购</el-button>
                <!-- <el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button> -->
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click="closeDialog">
        <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
            <el-form-item label="材料名称" prop="materialName">
                <el-input v-model="editForm.materialName" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="amount">
                <el-input v-model="editForm.amount" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-input v-model="editForm.unit" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="单价" prop="unitPrice">
                <el-input v-model="editForm.unitPrice"></el-input>
            </el-form-item>
            <el-form-item label="总价" prop="totalPrice">
                <el-input v-model="editForm.totalPrice"></el-input>
            </el-form-item>
            <el-form-item label="采购商" prop="purchaser">
                <el-input v-model="editForm.purchaser"></el-input>
            </el-form-item>
            <el-form-item label="生产日期" prop="productionDate">
                <el-date-picker type="date" placeholder="生产日期" v-model="editForm.productionDate" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="过期日期" prop="expireDate">
                <el-date-picker type="date" placeholder="过期日期" v-model="editForm.expireDate" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">提交</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import * as api from '../../api/interface'
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '',
            editForm: {},
            // rules表单验证
            rules: {
                materialName: [{ required: true, message: '请输入材料名称', trigger: 'blur' }],
                amount: [{ required: true, message: '请输入数量', trigger: 'blur' }],
                unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
                unitPrice: [{ required: true, message: '请输入单价', trigger: 'blur' }],
                totalPrice: [{ required: true, message: '请输入总价', trigger: 'blur' }],
                purchaser: [{ required: true, message: '请输入采购商', trigger: 'blur' }],
                productionDate: [{ required: true, message: '请输入生产日期', trigger: 'blur' }],
                expireDate: [{ required: true, message: '请输入过期日期', trigger: 'blur' }],
            },
            //查询条件
            formInline: {
                page: 1, //当前页面
                limit: 10, //每页数量
                userName: ''
            },
            // 删除部门
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            materialList: [],
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    /**
     * 页面初始化方法
     */
    created() {
        this.queryMaterial();
        this.getData();
    },
    methods: {
        // formatPurchaseLogType: function (row, column) {
        //     return row.userType == '0' ? "管理员" :
        //         row.userType == "1" ? "点餐员" :
        //         row.userType == "2" ? "配餐员" :
        //         row.userType == "3" ? "仓库管理员" :
        //         "未知";
        // },
        // formatSex: function (row, column) {
        //     return row.sex == '0' ? "女" :
        //         row.sex == "1" ? "男" :
        //         "未知";
        // },
        formatTime1: function (row, column) {
            return row.productionDate ? row.productionDate.substring(0, 10) : ""
        },
        formatTime2: function (row, column) {
            return row.expireDate ? row.expireDate.substring(0, 10) : ""
        },
        // 获取列表数据
        getData() {
            this.loading = true
            let para = {
                current: this.formInline.page,
                size: this.formInline.limit,
                userName: this.formInline.userName
            }
            api.queryPurchaseLogByPage(para).then(data => {
                this.logining = false;
                if (data.message != "success") {
                    this.logining = false;
                    this.$message.error(data.message)
                } else {
                    this.loading = false
                    data.returnPage.records.forEach(item => {
                        item.isExpire = item.expireDate ? new Date(Date.parse(item.expireDate.replace(/-/g, '/'))) <= new Date() : "";
                    })
                    this.listData = data.returnPage.records

                    console.log(this.listData)
                    this.pageparm.currentPage = data.returnPage.current
                    this.pageparm.pageSize = data.returnPage.size
                    this.pageparm.total = data.returnPage.total
                }
            }).catch(e => {
                console.log(e)
                this.logining = false;
            });
        },
        // // 获取列表数据
        // queryMaterial() {
        //     api.queryMaterial({}).then(data => {
        //         if (data.message == "success") {
        //             this.materialList = data.returnList
        //         }
        //     }).catch(e => {});
        // },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getData()
        },
        //显示添加界面
        handleAdd: function (index, row) {
            this.editFormVisible = true
            this.title = '新增'
            this.editForm = {}
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            this.title = '编辑'
            this.editForm = row
        },
        // 关闭编辑
        closeDialog() {
            this.editFormVisible = false
        },
        // 编辑、增加页面的方法
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.editForm);
                    para.createUser = localStorage.getItem("userId");
                    para.createUserName = localStorage.getItem("userName");
                    this.loading = true;
                    api.updateStatus(para)
                        .then(res => {
                            this.loading = false;
                            if (res.message == 'success') {
                                this.$message({ message: "提交成功", type: "success" });
                                this.getData();
                                this.editFormVisible = false;
                            } else {
                                this.$message({ type: 'error', message: res.message })
                            }
                        })
                        .catch(e => {
                            // this.editFormVisible = false
                            this.loading = false
                        })
                } else {
                    return false
                }
            })
        },
        // // 删除
        // handleDel(index, row) {
        //     this.$confirm('确定要删除吗?', '信息', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        //         .then(() => {
        //             let para = {
        //                 purchaseLogId: row.purchaseLogId
        //             }
        //             api.delPurchaseLog(para)
        //                 .then(res => {
        //                     if (res.message == 'success') {
        //                         this.$message({ message: "删除成功", type: "success" });
        //                         this.getData();
        //                     } else {
        //                         this.$message({ type: 'error', message: res.message })
        //                     }
        //                 })
        //                 .catch(e => {
        //                     this.loading = false
        //                 })
        //         });
        // },
      //查询材料
      queryMaterial(queryString, callback) {
            let para = {
                materialName: queryString
            };
            api.queryMaterial(para)
                .then(res => {
                    let list = res.returnList.map(item => {
                        item.value = item.materialName
                        return item;
                    });
                    callback(list);
                }).catch(() => {});
        },
        // handleSelect(item, index) {
        //     this.editForm.materialId = item.materialId;
        //     this.editForm.materialName = item.materialName;
        //     this.editForm.unit = item.unit;
        // },
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}
</style>
